<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 3n + 1 Game </title>
    <style>
        .cols {
            display: flex;
        }

        .col {
            display: flex;
            flex-direction: column;
        }

        .col div {
            width: 48px;
            text-align: right;
            margin: 0;
            padding: 0;
            color: #999;
        }

        .col div.prime {
            font-weight: bolder;
            color: #f33;
        }
    </style>
</head>

<body>
    <div class="cols"></div>
    <script src="./primes.js"></script>
    <script>
        const COLS = document.getElementsByClassName('cols')[0];
        const COL = document.createElement("div");
        const ODDS = [];
        
        COL.className = "col";
        
        for (let i = 3; i < 10000; i += 2) {
            ODDS.push(i);
        }
        for (let i = 0; i < ODDS.length; i++) {
            let div = document.createElement("div");
            div.textContent = ODDS[i];
            if (PRIMES.has(ODDS[i])) {
                div.className = "prime";
            }
            COL.appendChild(div);
        }

        const paint = idx => {
            const CP=COL.cloneNode(true);
            for (let i = 0; i < idx; i++) {
                let div = document.createElement("div");
                div.textContent = ".";
                CP.insertBefore(div, CP.childNodes[0]);
            }
            COLS.appendChild(CP);
        }

        for (let i = 0; i < 20; i++) {
            paint(i);
        }
    </script>
</body>

</html>